<script setup lang="ts">
  import { ref } from 'vue';
  import dayjs from 'dayjs';
  import { BasicTable, useTable } from '@/components/Table';
  import { GetPaymentApi } from '@/api/payment';
  import { Tag } from '@/components/InfoTag';

  const info = ref({
    total: 0,
  });

  const [registerTable, { getRawDataSource }] = useTable({
    title: '通道信息',
    canResize: true,
    columns: [
      {
        title: '通道名称',
        dataIndex: 'title',
      },
      {
        title: '通道费率',
        dataIndex: 'rate',
      },
      {
        title: '通道状态',
        dataIndex: 'status',
      },
      {
        title: '操作类型',
        dataIndex: 'type',
      },
      {
        title: '创建时间',
        dataIndex: 'create_time',
      },
    ],
    bordered: true,
    showSelectionBar: false,
    showTableSetting: true,
    accordion: true, // 手风琴效果
    api: GetPaymentApi,
    fetchSetting: {
      listField: 'list',
    },
    afterFetch: () => {
      const data = getRawDataSource();
      info.value.total = data.total;
    },
    useSearchForm: true,
    formConfig: {
      labelWidth: 120,
      schemas: [
        {
          field: 'type',
          label: '操作类型',
          component: 'Select',
          colProps: {
            span: 6,
          },
          componentProps: {
            options: [
              {
                label: '手动',
                value: '0',
              },
              {
                label: '自动',
                value: '1',
              },
              {
                label: '第三方',
                value: '2',
              },
            ],
          },
        },
        {
          field: 'title',
          label: '通道名称',
          component: 'Input',
          colProps: {
            span: 6,
          },
        },
      ],
    },
    rowKey: 'id',
    takeCare: '这是注意事项',
  });
</script>
<template>
  <main>
    <a-row :gutter="16">
      <a-col :span="24" style="margin-top: 16px">
        <BasicTable @register="registerTable">
          <template #toolbar>
            <Tag title="收款信息数量" color="green">{{ info.total }}</Tag>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'create_time'">
              {{ dayjs(record.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
            <template v-if="column.key === 'type'">{{
              record.type === '0' ? '手动' : record.type === '1' ? '自动' : '第三方'
            }}</template>
            <template v-if="column.key === 'status'">
              <a-tag :color="record.status === '0' ? 'red' : 'green'">{{
                record.status === '0' ? '关闭' : '开启'
              }}</a-tag>
            </template>
            <template v-if="column.key === 'rate'">
              <a-tag color="#c78787">{{ record.rate }}%</a-tag>
            </template>
          </template>
        </BasicTable>
      </a-col>
    </a-row>
  </main>
</template>
